import { Component, Vue, Prop, PropSync, Watch } from 'vue-property-decorator'
import styles from './pdfViewDialog.less'
import { debounce } from 'throttle-debounce'

/**
 * pdf预览页
 */
@Component({})
export default class PdfViewDialog extends Vue {
  @Prop({ default: '' }) url!: string
  @PropSync('dialogVisible', { default: false }) private visible!: boolean
  private pdfUrl: string = ''
  private pdfState: any = { pageIndex: 1, scale: 1 }
  private pdfFirstLoaded: boolean = true
  private pdfViewEle: any = null
  private scrollTop: number = 0
  private timer: any = null
  private headerTop: number = 10

  private render() {
    return (
      <section
        class={[
          styles.pdfViewDialog,
          { [styles.show]: this.visible },
          'pdf-dialog',
        ]}
        onMousedown={this.mousedownEvt}
        onMouseup={this.mouseupEvt}
      >
        <img
          class="close-icon"
          src={require('@/assets/close.png')}
          onClick={this.closeEvt}
          width="60px"
          height="60px"
        />
        <div
          class="es-pdf-container"
          style={{ paddingTop: `${this.headerTop}px` }}
        >
          {this.visible && (
            <es-pdf-view
              scale={this.pdfState.scale}
              edgesVisible={false}
              highlight={false}
              pdfUrl={this.pdfUrl}
              pageIndex={this.pdfState.pageIndex}
              pdfLoadFailedTip="文档加载失败"
              onSet-pdf-state={this.setPdfState}
              pdfWorkerSrc="/static/pdfjs/new/pdf.worker.js"
              onLoaded={this.loadedFinish}
              loadingBackground={this.backgroundLoading}
              loadingBackgroundType="html"
              showSignature={false}
            />
          )}
        </div>
        <div class="setting-box">
          <span
            class={['zoom-out', { disabled: this.pdfState.scale < 0.75 }]}
            onClick={() => this.zoomEvt(false)}
          >
            <i class="el-icon-zoom-out" />
          </span>
          <span
            class={['zoom-in', { disabled: this.pdfState.scale > 2.75 }]}
            onClick={() => this.zoomEvt(true)}
          >
            <i class="el-icon-zoom-in" />
          </span>
          {this.$slots.default}
        </div>
      </section>
    )
  }

  @Watch('visible')
  onVisibleChange(visible: boolean) {
    if (visible) {
      this.pdfState.scale = 1
      this.pdfUrl = this.url
    } else {
      this.resetDialog()
    }
  }

  private zoomEvt(val: boolean) {
    if (val) {
      if (this.pdfState.scale > 2.75) {
        return
      }
      this.pdfState.scale = this.pdfState.scale + 0.25
    } else {
      if (this.pdfState.scale < 0.75) {
        return
      }
      this.pdfState.scale = this.pdfState.scale - 0.25
    }
  }

  private closeEvt() {
    this.visible = false
  }

  private mounted() {
    this.pdfViewEle = document.querySelector('.pdf-dialog')
    this.bindScroll()
  }

  private setPdfState(state: any) {
    this.pdfState = Object.assign({}, this.pdfState, state)
  }
  private mousedownEvt(evt: any) {
    if (
      evt.target.className === 'es-pdf-view' ||
      evt.target.className.indexOf('pdf-contaner') !== -1
    ) {
      this.timer = setTimeout(this.closeEvt, 100)
    }
  }

  private mouseupEvt() {}

  private beforeDestroy() {
    // document.removeEventListener('mousemove', this.moveEvt)
    this.pdfViewEle.removeEventListener(
      'scroll',
      debounce(30, false, () => {
        this.pdfScroll()
      })
    )
  }

  private bindScroll() {
    // 滚动更新页码
    this.pdfViewEle.addEventListener(
      'scroll',
      debounce(30, false, () => {
        this.pdfScroll()
      })
    )
  }

  private pdfScroll() {
    // if (!this.locationJump) return
    this.scrollTop = this.pdfViewEle.scrollTop
    const scrollTop =
      this.scrollTop +
      (document.documentElement.clientHeight - this.headerTop) * 0.5
    const pageIndex = this.pdfState.pageList.findIndex(
      (page: any, index: number) =>
        page && page.posY * this.pdfState.scale > scrollTop
    )
    this.pdfState.pageIndex = pageIndex < 0 ? 1 : pageIndex + 1
  }

  private resetDialog() {}
  private loadedFinish() {
    if (this.pdfFirstLoaded) {
      this.pdfFirstLoaded = false
      // this.resetScale()
    }
  }
  private resetScale() {
    const scale: any = (700 / this.pdfState.maxWidth).toFixed(2)
    // scale = Math.floor(scale / 0.25) * 0.25
    // scale = scale > this.maxScale ? this.maxScale : scale
    // scale = scale < 0.5 ? 0.5 : scale
    // this.setPdfState({scale: })
    this.pdfState.scale = parseFloat(scale)
  }

  private get backgroundLoading() {
    return '<i class="el-icon-loading" style="color: #fff; font-size: 34px;"/>'
  }
}
